@import '../../styles/var.less';

.layout {
  &__header {
    position: relative;
    width: 100%;
    height: @headerHeight;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    &--fix {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9;
      transition: width 0.2s;
    }

    &--close&--fix {
      width: calc(100% - @sideBarCloseWidth);
    }

    &--fix&--side {
      width: calc(100% - @sideBarWidth);
    }

    &--fix&--side&--close {
      width: calc(100% - @sideBarCloseWidth);
    }

    &--top {
      .layout__header__inner {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
      }

      &-side-bar {
        flex: 1 1 0%;
        max-width: 1000px;
      }
    }

    &--side {
      .layout__header__inner {
        background: #fff;
      }
    }

    &--light {
      background: #fff;
    }

    &--dark {
      background: @menuDarkColor;
    }

    &--dark&--top {
      .layout__header__inner {
        color: #fff;
      }
    }

    &__inner {
      height: 100%;

      &--fixed {
        max-width: 1200px;
      }

      &--fluid {
        padding: 0 20px;
      }
    }
  }
}
